<template>
    <div id="divml1">
         <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-button type="primary" @click="dialogFormVisible1 = true">添加等级</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center',background:'#f5f7fa' }"
      :cell-style="{ textAlign: 'center' }"
      border="">
      <el-table-column prop="gradeName" label="等级名称"> </el-table-column>
      <el-table-column prop="integral" label="默认会员等级"> 
        <template slot-scope="scope">
           {{scope.row.isDefault==1?"默认":"不为默认"}}
        </template>
      </el-table-column>
      <el-table-column prop="integral" label="成长积分"></el-table-column>
      <el-table-column prop="sale" label="折扣%"></el-table-column>
      <el-table-column prop="remarks" label="备注"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small"  @click.native.prevent="repeat(scope.$index,tableData)">编辑</el-button>
          <el-button type="text" size="small"  @click.native.prevent="del(scope.$index,tableData)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

<!-- 等级添加 -->
    <el-dialog title="添加" :visible.sync="dialogFormVisible1">
        <el-form
          :model="form">
          <p>
            <span style="color: red">*</span>
            会员等级名称：&nbsp;
            <el-input v-model="form.gard" placeholder="请输入"></el-input>
          </p>
         <p id="mgep">
            <span style="color: red">*</span>
            成长值积分：&nbsp;
            <el-input v-model="form.inte" placeholder="请输入"></el-input>
          </p>
          <p id="radioel">
             设为默认会员等级：
            <el-radio id="radioel1" v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="0">否</el-radio>
          </p>
           <p id="radioel3">
            备注：&nbsp;
            <el-input v-model="form.remark" placeholder="请输入"></el-input>
          </p>
         <div id="mgespan" >
             <span style="color: red">*</span>折扣：
            <el-input placeholder="请输入折扣力度" v-model="form.discount">
                <template slot="append">%</template>
            </el-input>
        </div>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

     <!-- 等级编辑 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible2">
        <el-form
          :model="form">
          <p id="mgep3">
            <span style="color: red">*</span>
            等级名称：&nbsp;
            <el-input v-model="form.gard" placeholder="请输入"></el-input>
          </p>
         <p id="mgep">
            <span style="color: red">*</span>
            成长值积分：&nbsp;
            <el-input v-model="form.inte" placeholder="请输入"></el-input>
          </p>
           <p id="radioel">
             设为默认会员等级：
            <el-radio id="radioel1" v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="0">否</el-radio>
          </p>
         <div id="mgespan">
             <span style="color: red">*</span>折扣：
            <el-input placeholder="请输入折扣力度" v-model="form.discount">
                <template slot="append">%</template>
            </el-input>
          <p>
            备注：&nbsp;
            <el-input v-model="form.remark" placeholder="请输入"></el-input>
          </p>
        </div>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="editor">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        page: 1,
        size: 5,
        radio:"",
        tableData: [],
        type:'',
        arr:[],
        arr1:"",
        index:"",
        str:"",
        id:"",
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        formLabelWidth: '120px',
         form: {
          gard: '',
          inte: '',
          discount: '',
          remark:'',
        },
        input2: '',
        formInline: {
        start: "",
        out: "",
      },
      }
    },
     methods: {
       add(){//添加接口
          this.$axios({
            url:'/gym/grade/add',
            method:"post",
            data:{
              gradeName:this.form.gard,
              integral:this.form.inte,
              isDefault:this.radio,
              sale:this.form.discount,
              remarks:this.form.remark
            }
          }).then((res)=>{
            console.log(res.data);
            this.getCon();
            this.dialogFormVisible1 = false;
            if(res.data.code==5008){
              this.$message({
              message: '注意：已经有默认会员!',
              type: 'warning'
          });
            }
          })
       },

      editor(){  //编辑接口
      console.log(this.radio);
         this.$axios({
            url: "/gym/grade/update",
            method: "post",
            data: {
              id:this.id,
              gradeName:this.form.gard,
              integral:this.form.inte,
              isDefault:this.radio,
              sale:this.form.discount,
              remarks:this.form.remark
            },
          }).then((res)=>{
            this.getCon();
            this.dialogFormVisible2 = false;
        })
      },

      repeat(index,data){  //编辑弹框已有数据
        this.id=data[index].id,
        this.dialogFormVisible2 = true,
        this.form.gard=data[index].gradeName,
        this.form.inte=data[index].integral,
        this.form.remark=data[index].remarks
      },

      del(index, data) {   //删除接口
      console.log(index, data);
      this.$confirm("此操作将永久这条内容？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/gym/grade/delete",
            method: "post",
            data: {
              id:data[index].id,
            },
          }).then((res) => {
            if (res.data.error) {
              this.$message.error("删除失败");
            } else {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getCon();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    onSubmit() {
      console.log("submit!");
    },

    notarize() {
      console.log("submit!");
    }, 

    getCon() {
      this.$axios({
        url: "/gym/grade/all"
      }).then((res) => {
      this.tableData = res.data.data;
      console.log(this.tableData);
      // console.log(res.data.data);
      this.arr1=res.data.data.map(item=>
      item.isDefault)
      // this.arr=arr1
      // console.log(this.arr1);
      });
    },//查询页面
  },

    mounted(){
    this.getCon();
  },
  }
</script>
<style scoped lang="less">
.demo-form-inline {
  float: right;
}

#divml1 {
  margin: 20px;
};

.el-form-item {
  margin-left: 10px;
};

.el-form {
  display: inline;
};

.el-input {
  width: 220px;
  margin: 10px;
};

.block {
  margin-left: 25px;
};

.el-cascader {
  margin: 10px 5px;
  width: 220px;
};

#radioel{
  margin:10px 10px 10px -130px;
  #radioel1{
    margin-left: 20px;
  }
};

#radioel3{
  margin-left: 65px;
};

#mgep{
  margin-left: 10px;
};

#mgep3{
  margin-left: 25px;
};

#mgespan{
    margin-left: 60px;
}
</style>